import React, { memo, useEffect, useState, useRef } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";
import { UserListenRankWrap } from "./style";
import { userListenRankAction } from "../../../store/actionTypes";
import classNames from "classnames";
import Loading from "@/components/loading";

export default memo(function UserListenRank(props) {
  const [type, setType] = useState(1);
  //  type=1 时只返回 weekData, type=0 时返回 allData
  const tipRef = useRef();
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(userListenRankAction(props.id, type));
  }, [dispatch, props.id, type]); // eslint-disable-line react-hooks/exhaustive-deps
  const { userListenRankInfo, userDetailInfo } = useSelector(
    (state) => ({
      userListenRankInfo: state.getIn(["userInfo", "userListenRankInfo"]),
      userDetailInfo: state.getIn(["userInfo", "userDetailInfo"]),
    }),
    shallowEqual
  );

  const RankInfo = userListenRankInfo.code == 200 && userListenRankInfo;

  const RankType =
    type == 1
      ? RankInfo.weekData
      : type == 0
      ? RankInfo.allData
        ? RankInfo.allData.length === 0
          ? ""
          : RankInfo.allData
        : ""
      : "";
  if (userListenRankInfo.code == 200) {
    if (RankType) {
      if (RankType.length == 0) {
        setType(0);
      }
    }
  }
  const mouseMove = () => {
    tipRef.current.style.display = "block";
  };
  const mouseMoveBox = () => {
    tipRef.current.style.display = "block";
  };
  const mouseLeave = () => {
    tipRef.current.style.display = "none";
  };
  const mouseLeaveBox = () => {
    tipRef.current.style.display = "none";
  };
  const checkWeekData = () => {
    setType(1);
  };
  const checkAllData = () => {
    setType(0);
  };

  return (
    <UserListenRankWrap>
      {RankType ? (
        RankType.length !== 0 ? (
          <React.Fragment>
            <div className="user-songrank clear user-audio-p">
              <span className="fl">听歌排行</span>
              <span className="user-listen">
                累积听歌{userDetailInfo.listenSongs}首
              </span>
              <span className="n-iconpoint">
                <a
                  onMouseLeave={mouseLeave}
                  onMouseMove={mouseMove}
                  className="icon2"
                >
                  {" "}
                </a>
                <div
                  ref={tipRef}
                  onMouseMove={mouseMoveBox}
                  onMouseLeave={mouseLeaveBox}
                  className="tip"
                >
                  <p>实际播放时间过短的歌曲将不纳入计算。</p>
                  <i className="t"></i>
                  <i className="b"></i>
                </div>
              </span>
              <div className="user-songrank fr">
                <span
                  onClick={checkWeekData}
                  className={classNames({ "span-c": type == 1 })}
                >
                  最近一周
                </span>
                <i></i>
                <span
                  onClick={checkAllData}
                  className={classNames({ "span-c": type == 0 })}
                >
                  所有时间
                </span>
              </div>
            </div>
            <ul>
              {RankType ? (
                RankType.slice(0, 10).map((item, index) => {
                  const titleName = item.song.ar.map((itemb) => {
                    return itemb.name;
                  });
                  return (
                    <li className="clear" key={item.song.name}>
                      <div className="hd fl">
                        <span className="ply tablepng"></span>
                        <span className="num">{index + 1}.</span>
                      </div>
                      <div className="song">
                        <div>
                          <a className="songName fl">{item.song.name} </a>
                          <span className="ar">
                            <em>-</em>
                            <span
                              title={titleName.toString().replace(",", "/")}
                            >
                              {item.song.ar.map((itema, indexa) => {
                                return indexa + 1 == item.song.ar.length ? (
                                  <a key={itema.name}>{itema.name}</a>
                                ) : (
                                  <React.Fragment key={itema.name}>
                                    <a>{itema.name}</a>
                                    <React.Fragment>/</React.Fragment>
                                  </React.Fragment>
                                );
                              })}
                            </span>
                          </span>
                        </div>
                      </div>
                      <div className="tops clear">
                        <span
                          className="bg"
                          style={{ width: item.score + "%" }}
                        ></span>
                      </div>
                    </li>
                  );
                })
              ) : (
                <li>
                  <Loading />
                </li>
              )}
            </ul>
            <div className="more clear">
              <a>查看更多&gt;</a>
            </div>
          </React.Fragment>
        ) : (
          ""
        )
      ) : (
        ""
      )}
    </UserListenRankWrap>
  );
});
